<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <nav>
                    <!-- .nav-tabs创建选项卡导航 -->
                    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                        <!-- 选项卡的切换功能是通过data-toggle="tab"来实现的 -->
                        <a href="#nav-home" class="nav-item nav-link active" id="nav-home-tab"  role="tab" >主页</a>
                        <a href="#nav-contact" class="nav-item nav-link " id="nav-contact-tab" role="tab" >联系方式</a>
                        <a href="#nav-about" class="nav-item nav-link " id="nav-about-tab" role="tab" >关于我们</a>
                    </div>
                </nav>
                <!-- 用来装所有选项卡内容的div -->
                <!-- .py-3垂直内边距为3 -->
                <!-- .px-3水平内边距为3 -->
                <!-- .px-sm-0在sm断点水平内边距为0 -->
                <div class="tab-content py-3 px-3 px-sm-0" id="nav-tab-content">
                    <!-- .tab-pane创建选项卡内容 -->
                    <!-- .fade淡入淡出效果 -->
                    <!-- .show显示这个选项卡的内容 -->
                    <!-- .active显示为激活样式 -->
                    <!-- 注意，这里的id要对应上面超链接的id -->
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel">
                        <h1>主页</h1>
                    </div>
                    <div class="tab-pane fade " id="nav-contact" role="tabpanel">
                        <h1>联系方式</h1>
                    </div>
                    <div class="tab-pane fade " id="nav-about" role="tabpanel">
                        <h1>关于我们</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 通过jq实现选项卡的切换
        $(document).ready(function(){
            // 给nab-tabs内所有的超链接绑定点击事件
            $(".nav-tabs a").click(function(){
                // 被点击时显示选项卡内容
                $(this).tab("show");
            })
        })
    </script>

    
</body>
</html>